<style lang="scss" scoped>
.title {
  background-color: #fff;
  width: 100%;
}

.top {
  width: 100%;
  height: 90px;
  background-color: #fff;
  border-radius: 10px;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  top: 250px;

  li {
    display: flex;
    // flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 5px;
  }
  .active {
    background: pink;
    color: #fff;
  }
}

.name {
  height: 50px;
}
</style>

<template>
  <div style="margin: 10px; background-color: #f1f1f1">
    <header>
      <van-nav-bar
        left-arrow
        @click-left="$router.back()"
        title="网上预约挂号_在线资讯"
      />
    </header>
    <main style="padding: 10px">
      <van-form ref="config.value">
        <nav>
          <li
            v-for="(relation, index) in relationList"
            :class="{ active: activity === index }"
            :key="index"
            :v-model="config.relation"
            @click="handleRelation(relation, index)"
          >
            <span>{{ relation }}</span>
          </li>
        </nav>
        <van-cell-group style="width: 100%; margin-right: 10px">
          <van-field
            v-model="config.name"
            required
            label="姓名"
            placeholder="请输入真实姓名"
          />
        </van-cell-group>
        <van-cell-group style="width: 100%; margin-right: 10px">
          <van-field
            v-model="config.standing"
            required
            label="身份证"
            placeholder="请输入身份证号"
            @input="setIdNumber(config.standing)"
          />
        </van-cell-group>
        <van-cell-group style="width: 100%; margin-right: 10px">
          <van-field
            v-model="config.birthday"
            required
            label="出生日期"
            placeholder="请输入出生日期"
          />
        </van-cell-group>
        <van-cell-group style="width: 100%; margin-right: 10px">
          <van-field
            v-model="config.age"
            required
            label="年龄"
            placeholder="请输入年龄"
          />
        </van-cell-group>
        <van-cell-group style="width: 100%; margin-right: 10px">
          <van-field
            v-model="config.sex"
            required
            label="性别"
            placeholder="请输入性别"
          />
        </van-cell-group>
        <van-cell-group style="width: 100%; margin-right: 10px">
          <van-field
            v-model="config.phone"
            required
            label="联系方式"
            placeholder="请输入手机号码"
          />
        </van-cell-group>
      </van-form>
      <div><span style="color: red;font-size: 16px;">*</span> 为保证顺利就诊，姓名、手机号、身份证等务必真实有限。个人信息提供您就诊时使用，请您放心填写。</div>
      <van-button type="success" round style="width: 100%" @click="onPonent"
        >添加就诊人</van-button
      >
    </main>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
const activity = ref(0)
const router = useRouter()
const config = ref({
  name: '',
  standing: '',
  birthday: '',
  sex: '',
  phone: '',
  relation: '',
  age: 0,
})
// 关系
const relationList = ref(['配偶', '父母', '亲戚', '朋友', '其他', '子女'])

function setIdNumber(standing: string) {
  if (standing.length === 18) {
    // 获取第7位到10为的数组作为出生日期
    config.value.birthday =
      standing.substr(6, 4) +
      '-' +
      standing.substr(10, 2) +
      '-' +
      standing.substr(12, 2)
    // state.gender = `${idNumber.substr(16,1) % 2 === 0 ? '男' : '女'}`
    const start = config.value.standing.slice(0, 6)
    const end = config.value.standing.slice(-4)
    config.value.standing = `${start}**********${end}`
  }
}

function extractGenderFromId(id: string) {
  // 假设身份证的第17位为奇数表示男性，偶数表示女性
  return parseInt(id.charAt(16), 10) % 2 === 0 ? '女' : '男'
}

function calculateAge(birthYear: number, birthMonth: number, birthDay: number) {
  const today = new Date()
  const birthDate = new Date(birthYear, birthMonth - 1, birthDay)
  let age = today.getFullYear() - birthDate.getFullYear()

  if (
    today.getMonth() < birthMonth ||
    (today.getMonth() === birthMonth && today.getDate() < birthDay)
  ) {
    age--
  }
  return age
}

watch(
  () => config.value.standing,
  newId => {
    if (newId.length !== 18) return
    const birthYear = parseInt(newId.substr(6, 4), 10)
    const birthMonth = parseInt(newId.substr(10, 2), 10)
    const birthDay = parseInt(newId.substr(12, 2), 10)
    config.value.sex = extractGenderFromId(newId)
    config.value.age = calculateAge(birthYear, birthMonth, birthDay)
  },
)

const onPonent = () => {
  // console.log(config.value);
  if (!config.value.name) {
    alert('姓名不能为空')
  } else if (!config.value.standing) {
    alert('身份证不能为空')
  } else if (!config.value.birthday) {
    alert('出生日期不能为空')
  } else if (!config.value.phone) {
    alert('电话号码不能为空')
  } else if (!config.value.sex) {
    alert('性别不能为空')
  } else {
    axios.put('/api/user/list', config.value)
    console.log(config.value)
    alert('保存就诊人成功')
    config.value.birthday = ''
    config.value.name = ''
    config.value.standing = ''
    config.value.phone = ''
    config.value.sex = ''
    config.value.age = 0
    config.value.relation = ''
    router.back()
  }
}

const handleRelation = (relation: string, index: number) => {
  config.value.relation = relation
  // console.log(config.value.relation);
  activity.value = index
  // console.log(v);
}
</script>
